<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="./trd/jquery/jquery-2.0.2.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./trd/element/element.css">
    <link rel="stylesheet" href="../css/base.css">
    <script type="text/javascript" src="./trd/vue/vue.js"></script>
    <script type="text/javascript" src="./trd//element/element.js"></script>
    <style>
       .el-aside {background-color: rgb(84, 92, 100)}
       /*  .el-menu {border-right:solid 0px rgb(84, 92, 100)}*/
        .el-main {
            height: 100%;
            padding: 0px;
        }
        iframe {
            border-width: 0px;
            border-style: inset;
            border-color: initial;
            border-image: initial;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header style="height: 40px;background-color: #4582bf"><span style="margin-left: 60px;    font-size: 25px;color: white;line-height: 40px">我的页面</span></el-header>
            <el-container style="height: calc(100vh - 40px);">
                <el-col :span="3">
                    <el-aside style="width:100%;height: 100%" >
                            <el-menu
                                    class="el-menu-vertical-demo"
                                    @open="handleOpen"
                                    @close="handleClose()"
                                    background-color="#545c64"
                                    text-color="#fff"
                                    default-active="1"
                                    active-text-color="#ffd04b">
                                <template v-for="(menu,index) in menuInfo" >
                                    <el-submenu :index="(menu.index+'')">
                                        <template slot="title" >
                                            <i class="el-icon-menu"  @click="openMenu(menu)"></i>
                                            <span  @click="openMenu(menu)">{{menu.name}}</span>
                                        </template>
                                    </el-submenu>
                                </template>
                            </el-menu>
                        </el-row>
                    </el-aside>
                </el-col>
                <el-col :span="21">
                    <el-main>
                        <iframe  :src="src" style="height: calc(100% - 10px);width: 100%"></iframe>
                    </el-main>
                </el-col>

            </el-container>
        </el-container>


    </div>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>